<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>打地鼠</title>
		<style>
		.box1{
		width: 200px;
		height: 200px;
		border: red 3px solid;
		border-radius: 200px;
		float: left;
		margin-left: 20px;
		}
		.box2{
			width:200px;
			height:200px;
			border:red 3px solid;
			border-radius: 200px;
			float: left;
			margin-left: 20px;
		}	
		.box3{
		width:100px;
		height:100px;
		background-color: #FF0000;
		border-radius: 100px;/* 给圆角 */
		line-height: 100px;/* 文字垂直居中 */
		text-align: center;/* 文字水平居中 */
		font-size: 20px;/* 给字体大小 */
		margin:50px;/* 外边距 */
		}
		.box3:hover{
		/* margin-left:250px; */
		transform: translate(0%,255%);
		 
		}	
			
			
			
			
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box3">地鼠</div>
		</div>
		<div class="box2"></div>
		
	</body>
</html>
